<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>长者档案</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button type="primary" @click="openAddOlderDialog">入住登记</el-button>
      </el-col>
      <el-col :span="18" :offset="2">
        <el-form :inline="true" :model="SearchForm" class="demo-form-inline">
          <el-form-item>
            <el-select v-model="SearchForm.careId">
              <el-option label="护理等级" :value="0"></el-option>
              <el-option :label="item.level" :value="item.id" v-for="item in careList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="SearchForm.labelId">
              <el-option label="标签" :value="0"></el-option>
              <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="SearchForm.status" placeholder="请选择">
              <el-option label="在院状态" :value="-1"></el-option>
              <el-option label="退房" value="0"></el-option>
              <el-option label="入住" value="1"></el-option>
              <el-option label="待退房" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="SearchForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
        :data="OlderList"
        style="width: 100%;text-align: center">
      <el-table-column label="编号" type="index" align="center"></el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          align="center">
      </el-table-column>
      <el-table-column
          prop="bed.bedname"
          label="床位号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="idcard"
          label="身份证号"
          align="center">
      </el-table-column>
      <el-table-column
          prop="tel"
          label="联系电话"
          align="center">
      </el-table-column>
      <el-table-column
          prop="checkdate"
          label="入住日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="exitdate"
          label="出院日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="status"
          label="在院状态"
          align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0">退房</el-tag>
          <el-tag v-if="scope.row.status == 1">入住</el-tag>
          <el-tag v-if="scope.row.status == 2">待退房</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
              style="margin-left: 10px"
              size="mini"
              v-if="scope.row.status == 1"
              @click="openEdit(scope.row.id)">编辑
          </el-button>
          <el-button
              size="mini"
              style="margin-top: 5px"
              type="primary"
              @click="openDetail(scope.row)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6 , 12, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>

<!--    修改长者信息-->
    <el-dialog title="修改长者信息" :visible.sync="updateOlderDialogVisible"
               width="50%" @close="updateOlderFormClose" :close-on-click-modal="false">
      <el-form
          :model="updateOlderForm"
          :rules="updateOlderFormRules"
          ref="updateOlderFormRef"
          label-width="150px"
          class="demo-ruleForm"
      >
        <el-form-item label="头像" prop="img" >
          <el-upload

              name="uploadImg"
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccessModify"
              :before-upload="beforeAvatarUpload"
              :headers="myHeader">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 150px"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input v-model="updateOlderForm.idcard"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="updateOlderForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="updateOlderForm.sex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="updateOlderForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系电话" prop="emergencytel">
          <el-input v-model="updateOlderForm.emergencytel"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="updateOlderForm.age"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="address">
          <el-input v-model="updateOlderForm.address"></el-input>
        </el-form-item>
        <el-form-item label="老人身体状况" prop="healthy">
          <el-input v-model="updateOlderForm.healthy"></el-input>
        </el-form-item>
        <el-form-item label="合同模板" prop="contractId">
          <el-select  v-model="updateOlderForm.contractId">
            <el-option  :label="item.contractname" :value="item.id" v-for="item in contractList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="labelId">
          <el-select v-model="updateOlderForm.labelId">
            <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateOlder">保存</el-button>
        <el-button @click="updateOlderFormClose">取 消</el-button>
      </span>
    </el-dialog>
<!--    查看长者详细信息-->
    <el-dialog title="长者详情" :visible.sync="OlderDetailDialogVisible"
               width="80%" @close="OlderDetailFormClose" :close-on-click-modal="false">
      <el-descriptions v-model="Older" class="margin-top"  :column="3"  border>
        <el-descriptions-item >
          <template slot="label">
            头像
          </template>
          <el-avatar :src="'http://localhost:10001/'+Older.img"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{Older.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            性别
          </template>
          {{Older.sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            年龄
          </template>
          {{Older.age}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            身份证号
          </template>
          {{Older.idcard}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            电话
          </template>
          {{Older.tel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            家庭地址
          </template>
          {{Older.address}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            入住日期
          </template>
          {{Older.checkdate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            出院日期
          </template>
          {{Older.exitdate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            在院状态
          </template>
          <el-tag v-if="Older.status == 0">退房</el-tag>
          <el-tag v-if="Older.status == 1">入住</el-tag>
          <el-tag v-if="Older.status == 2">待退房</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            紧急联系人电话
          </template>
          {{Older.emergencytel}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            身体健康情况
          </template>
          {{Older.healthy}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            综合服务费
          </template>
          {{Older.totalmoney}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            合同模板
          </template>
          <el-tag>{{Older.contract ? Older.contract.contractname : ''}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            护理级别
          </template>
          <el-tag>{{Older.care ? Older.care.level : ''}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            床位编号
          </template>
          <el-tag>{{Older.bed ? Older.bed.bedname : ''}}</el-tag>

        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            标签
          </template>
          <el-tag>{{Older.label ? Older.label.labeltype : ''}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
<!--      <el-tabs v-model="activeName" @tab-click="handleClick" style="text-align: center">
        <el-tab-pane label="长者动态" name="first">长者动态</el-tab-pane>
        <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
        <el-tab-pane label="一卡通流水" name="third">一卡通流水</el-tab-pane>
        <el-tab-pane label="资料信息" name="fourth">资料信息</el-tab-pane>
      </el-tabs>-->
    </el-dialog>

    <!--    添加长者信息-->
    <el-dialog title="添加长者信息" :visible.sync="addOlderDialogVisible"
               width="50%" @close="addOlderFormClose" :close-on-click-modal="false" top="25px">
      <el-steps :active="active" simple>
        <el-step title="基本信息登记" icon="el-icon-edit"></el-step>
        <el-step title="入住设置" icon="el-icon-upload"></el-step>
        <el-step title="头像上传" icon="el-icon-picture"></el-step>
      </el-steps>
      <el-form
          ref="addOlderForm"
          :model="addOlderForm"
          :rules="addOlderformRules"
          label-position="left"
          label-width="150px"
          style="width: 500px;margin-left: 50px;margin-top: 50px">

        <div v-show="active == 1">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addOlderForm.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="addOlderForm.sex" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="addOlderForm.age" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="addOlderForm.idcard" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="联系电话" prop="tel">
            <el-input v-model="addOlderForm.tel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="addOlderForm.address" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入住日期" prop="checkdate">
            <el-date-picker
                v-model="addOlderForm.checkdate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="紧急联系人电话" prop="emergencytel">
            <el-input v-model="addOlderForm.emergencytel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="身体健康情况" prop="healthy">
            <el-input v-model="addOlderForm.healthy" placeholder="请输入" />
          </el-form-item>
        </div>
        <div v-show="active == 2">
          <el-form-item label="标签" prop="labelId">
            <el-select v-model="addOlderForm.labelId">
              <el-option :label="item.labeltype" :value="item.id" v-for="item in labelList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="护理级别" prop="careId">
            <el-select v-model="addOlderForm.careId">
              <el-option :label="item.level" :value="item.id" v-for="item in careList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="床位号" prop="bedId" :inline="true">
            <el-input  :value="item.bedname" placeholder="请选择" readonly="true" v-for="item in bedList" v-if="item.id == addOlderForm.bedId"/>
            <el-button size="mini" type="primary" @click.prevent="innerDialog2">选择</el-button>
          </el-form-item>
          <el-form-item label="合同模板" prop="contractId">
            <el-select v-model="addOlderForm.contractId">
              <el-option :label="item.contractname" :value="item.id" v-for="item in contractList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="综合服务费" prop="totalmoney">
            <el-input v-model="addOlderForm.totalmoney" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="在院状态" prop="status">
            <el-select v-model="addOlderForm.status" placeholder="请选择" disabled>
              <el-option label="在院状态" :value="-1"></el-option>
              <el-option label="退房" value="0"></el-option>
              <el-option label="入住" :value="1"></el-option>
              <el-option label="待退房" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-show="active == 3">
          <el-form-item label="头像" prop="img">
            <el-upload
                name="uploadImg"
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="myHeader">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 150px"></i>
            </el-upload>
          </el-form-item>
        </div>

      </el-form>
      <el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
      <el-button v-if="active < 3" style="margin-top: 12px" @click="next">下一步</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOlder">确定</el-button>
        <el-button @click="addOlderFormClose">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog class="el-st" title="选择床位" :visible.sync="innerDialog2Visible" @close="innerClose2" :close-on-click-modal="false" width="70%"
               top="50px" >
      <el-container >
        <div class="one">
          <div class="two">
            <!--楼栋数据-->
            <template>
              <el-table
                  :data="buildingList"
                  style="width: 100%"
                  @row-click="getBuildingId"
                  highlight-current-row
              >
                <el-table-column
                    prop="buildingname"
                    label="楼栋"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="one">
          <div class="two">
            <!--楼层数据-->
            <template>
              <el-table
                  :data="storeyList"
                  style="width: 100%"
                  @row-click="getStoreyId"
                  highlight-current-row
              >
                <el-table-column
                    prop="storeyname"
                    label="楼层"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div >
        <div class="one">
          <div class="two">
            <!--房间数据-->
            <template>
              <el-table
                  :data="roomList"
                  style="width: 100%"
                  @row-click="getRoomId"
                  highlight-current-row
              >
                <el-table-column
                    prop="roomname"
                    label="房间"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="housetype"
                    label="房间类型"
                    align="center">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="one">
          <div class="two">
            <!--床位数据-->
            <template>
              <el-table
                  :data="roomBedList"
                  style="width: 100%"
                  highlight-current-row
              >
                <el-table-column
                    prop="bedname"
                    label="床位"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="床位状态"
                    align="center">
                  <template slot-scope="bed">
                    <span style="color: green" v-if="bed.row.state==0">空闲</span>
                    <span style="color: red" v-if="bed.row.state==1">入住</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        v-if="scope.row.state == 0"
                        @click="selectNewBed(scope.row)">选择
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </el-container>
    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return{
      myHeader: {
        token: ''
      },
      uploadUrl: 'http://localhost:8088/upload/uploadImg',
      active:1,
      SearchForm:{
        careId:0,
        labelId:0,
        status:-1,
        name:'',
      },
      careList:[],
      labelList:[],
      contractList:[],
      OlderList:[],
      pageNum: 1,
      pageSize: 3,
      total:9,
      updateOlderDialogVisible:false,
      updateOlderForm:{
        img:'',
        bedId:0,
      },
      imageUrl: '',
      updateOlderFormRules:{
        name:{ required: true, message: "请输入姓名", trigger: "blur" },
        sex:{ required: true, message: "请输入性别", trigger: "change" },
        age:[{ required: true, message: "请输入年龄", trigger: "blur" },
          { type: 'number', message: '年龄必须为数字值',trigger: "blur" }
        ],
        idcard:{ required: true, message: "请输入身份证号", trigger: "blur" },
        tel:[
          {required: true, message: "请输入联系方式", trigger: "blur"},
          {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        address:{ required: true, message: "请输入地址", trigger: "blur" },
        labelId:{ required: true, message: "请输入标签", trigger: "change" },
        emergencytel:[
          {required: true, message: "请输入联系方式", trigger: "blur"},
          {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        contractId:{ required: true, message: "请输入合同模板", trigger: "change" },
      },
      OlderDetailDialogVisible:false,
      Older:{
        contract:{},
        care:{},
        bed:{},
        label:{}
      },
      addOlderDialogVisible:false,
      addOlderForm:{
        img:'',
      },
      addOlderformRules:{
        name:{ required: true, message: "请输入姓名", trigger: "blur" },
        sex:{ required: true, message: "请输入性别", trigger: "change" },
        age:[{ required: true, message: "请输入年龄", trigger: "blur" },
          { type: 'number', message: '年龄必须为数字值',trigger: "blur" }
        ],
        idcard:{required: true, message: "请输入身份证号", trigger: "blur" },
        tel:[
          {required: true, message: "请输入联系方式", trigger: "blur"},
          {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        address:{ required: true, message: "请输入地址", trigger: "blur" },
        checkdate:{ required: true, message: "请输入日期", trigger: "blur" },
        emergencytel:[
          {required: true, message: "请输入联系方式", trigger: "blur"},
          {pattern:  /^1[3456789]\d{9}$/ , message: '请输入正确的手机号', trigger: 'blur'}
        ],
        labelId:{ required: true, message: "请输入标签", trigger: "change" },
        careId:{ required: true, message: "请输入护理等级", trigger: "change" },
        bedId:{ required: true, message: "请输入床位号", trigger: "change" },
        contractId:{ required: true, message: "请输入合同模板", trigger: "change" },
        totalmoney:[{ required: true, message: "请输入综合服务费", trigger: "blur" },
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
        status:{ required: true, message: "请输入入住状态", trigger: "change" },
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime()+24*3600*1000 < Date.now();
        },
      },
      bedList:[],
      innerDialog2Visible:false,
      buildingList: [],
      storeyList: [],
      roomList: [],
      roomBedList:[],
      buildingNum: 0,
      storeyNum: 0,
      roomNum: 0,
      bedNum: 0,
      buildingId: 0,
      buildingName: '',
      storeyId: 0,
      storeyName: '',
      roomId: 0,
      roomName: '',
      bedId: 0,
    }
  },
  methods:{
    initHeaders() {
      let token = sessionStorage.getItem("token");
      this.myHeader.token = token;
    },
    //查询所有床位信息
    initBedData(){
      let url = "/older/selectAllBed";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.bedList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    //选择床位
    innerDialog2(){
      this.innerDialog2Visible = true;
      this.initBuilding();
      this.initBedData();
    },
    selectNewBed(bed){
      this.innerDialog2Visible = false;
      this.buildingList = [];
      this.storeyList = [];
      this.roomList = [];
      this.roomBedList = [];
      this.addOlderForm.bedId = bed.id;
      this.addOlderForm.status = 1;
    },
    innerClose2(){
      this.buildingList = [];
      this.storeyList = [];
      this.roomList = [];
      this.roomBedList = [];
    },
    initBuilding() {
      let url1 = "/building/list"
      this.$axios.get(url1).then((res) => {
        if (res.data.code == 200) {
          this.buildingList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url2 = "/building/num"
      this.$axios.get(url2).then((res) => {
        if (res.data.code == 200) {
          this.buildingNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initStorey() {
      let url3 = "/storey/list/" + this.buildingId
      this.$axios.get(url3).then((res) => {
        if (res.data.code == 200) {
          this.storeyList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url4 = "/storey/num/" + this.buildingId
      this.$axios.get(url4).then((res) => {
        if (res.data.code == 200) {
          this.storeyNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initRoom() {
      let url5 = "/room/list/" + this.storeyId
      this.$axios.get(url5).then((res) => {
        if (res.data.code == 200) {
          this.roomList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url6 = "/room/num/" + this.storeyId
      this.$axios.get(url6).then((res) => {
        if (res.data.code == 200) {
          this.roomNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initBed() {
      let url7 = "/bed/list/" + this.roomId
      this.$axios.get(url7).then((res) => {
        if (res.data.code == 200) {
          this.roomBedList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
      let url8 = "/bed/num/" + this.roomId
      this.$axios.get(url8).then((res) => {
        if (res.data.code == 200) {
          this.bedNum = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    // 行鼠标点击事件
    getBuildingId(row) {
      this.buildingId = row.id;
      this.storeyId = 0;
      this.storeyName = '';
      this.roomId = 0;
      this.roomName = '';
      this.buildingName = row.buildingname;
      this.initStorey()
      this.initRoom()
      this.initBed();
    },
    getStoreyId(row) {
      this.storeyId = row.id;
      this.roomId = 0;
      this.roomName = '';
      this.storeyName = row.storeyname;
      this.initRoom();
      this.initBed()
    },
    getRoomId(row) {
      this.roomId = row.id;
      this.roomName = row.roomname;
      this.initBed();
    },
    //打开添加框
    openAddOlderDialog() {
      this.addOlderForm = {};
      this.imageUrl='';
      this.active = 1;
      this.addOlderDialogVisible = true;

    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 2) this.active = 1
    },
    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1
    },
    addOlderFormClose(){
      this.addOlderDialogVisible = false;
      this.addOlderForm = {};
    },
    //添加老者信息
    addOlder(){
      let url = "/older/insertOlder";
      this.$refs.addOlderForm.validate((val)=>{
        if(val){
          this.$axios.post(url,this.addOlderForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.addOlderDialogVisible = false;
              this.initOlderData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },
    //添加图片
    handleAvatarSuccess(res,file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.addOlderForm.img = res.data;
    },


    //查看长者详情数据
    openDetail(older){
      this.OlderDetailDialogVisible = true;
      this.Older = older;
      console.log(this.Older);
    },
    OlderDetailFormClose(){
      this.OlderDetailDialogVisible = false;
    },

    //打开修改框
    openEdit(id) {
      this.updateOlderDialogVisible = true;
      let url = "/older/selectOlderById?id="+id;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.updateOlderForm = res.data.data;
          this.imageUrl='http://localhost:10001/'+ res.data.data.img;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    //修改头像之前
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt20M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isJPG && isLt20M;
    },
    //修改头像之后
    handleAvatarSuccessModify(res,file){
      this.imageUrl = URL.createObjectURL(file.raw);
      this.updateOlderForm.img = res.data;
    },
    updateOlderFormClose(){
      this.updateOlderDialogVisible = false;
    },
    //保存修改信息
    updateOlder(){
      let url = "/older/updateOlder";
      this.$refs.updateOlderFormRef.validate((val)=>{
        if(val){
          this.$axios.post(url,this.updateOlderForm).then((res)=>{
            if(res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.updateOlderDialogVisible = false;
              this.initOlderData();
            }else {
              this.$message({
                message: res.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
        }else {
          alert("请完善信息")
        }
      })
    },

    //分页查询
    search() {
      this.pageNum = 1;
      this.initOlderData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initOlderData();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initOlderData();
    },
    initOlderData(){
      let url = "/older/selectOlderByCons";
      this.$axios.get(url,{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          name:this.SearchForm.name,
          status:this.SearchForm.status,
          labelId:this.SearchForm.labelId,
          careId:this.SearchForm.careId
        }
      }).then((res)=>{
        if(res.data.code == 200){
          this.OlderList = res.data.data.list;
          this.total = res.data.data.total;
          console.log(this.OlderList);
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initCareData(){
      let url = "/older/selectAllCare";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.careList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initLabelData(){
      let url = "/older/selectAllLabel";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.labelList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initContractData(){
      let url = "/older/selectAllContract";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.contractList = res.data.data;
        }else {
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initOlderData();
    this.initCareData();
    this.initLabelData();
    this.initContractData();
    this.initHeaders();
  }
}
</script>

<style scoped>
.one {
  width: 23%;
  height: 800px;
  background-color: #ffffff;
  display: inline-block;
  margin-left: 15px;
}

.two {
  width: 100%;
  height: 740px;
}

.three {
  width: 100%;
  height: 60px;
  line-height: 40px;
  border-top: 1px #dbdada solid;
}
</style>